<template>
	<view class="wn-calendar">
		
		<view class="head">
			<image @click="onChange('prev')"
				src=""
				class="arrow left" mode="aspectFit"></image>
			<text class="t">{{headText}}</text>
			<image @click="onChange('next')"
				src=""
				class="arrow" mode="aspectFit"></image>
		</view>
		<view class="labels">
			<view class="label-item" v-for="(label,index) in labels" :key="index" @tap="chooseWeek(index)">
				<text class="t">{{label}}</text>
			</view>
		</view>
		
		<view v-if="showDay" :class="['row', isBorder ? 'border' : '']" v-for="(row,index) in rows" :key="index">
			<view @click="onChoose(item)" :class="[
				'day-item', 
				item.show && $moment(toDay).diff($moment(item.date), 'days') < 1 ? 'show' : '',
				tempDate.some((d) => d === item.date) ? 'choose' : '',
				active === item.date ? 'active' : ''
			]" v-for="(item, ind) in days.slice(row*7, (row+1)*7)" :key="item.date">
				<text class="t" :class="{ban:item.data && item.data.type_text}">{{item.label}}</text>
				<text v-if="item.data && item.data.type_text" class="data" :class="'data-' + item.data.type">
									<!-- {{toDay}}{{item.date}} -->
								{{item.data.type == 3 ? '全天' : item.data.type_text}}
								<!-- 全 -->
								</text>
			</view>
			
		</view>
	</view>
</template>

<script>
import moment from '@/common/moment.min.js';
	import calendar from './calendar'
	export default {
		name: "w-calendar",
		emits: ['choose', 'change'],
		props: {
			showDay: {
				type: Boolean,
				default: true
			},
			data: {
				type: Array,
				default () {
					return []
				}
			},
			colors: {
				type: Array,
				default () {
					return ['#2979ff', '#18bc37', '#f3a73f', '#e43d33', '#8f939c']
				}
			},
			format: {
				type: String,
				default: ''
			},
			isLess: {
				type: Boolean,
				default: false
			}, 
			isBorder: {
				type: Boolean,
				default: false
			},
			isEn: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			headText() {
				if (this.format === '/') {
					return `${this.year}/${this.month}`
				} else {
					if (this.isEn) {
						return `${calendar.getEn(this.month)}, ${this.year}`
					} else {
						return `${this.year}年${this.month}月`
					}
				}
			}
		},
		data() {
			return {
				labels: this.isEn ? calendar.labels_en : calendar.labels_zh,
				active: '',
				rows: [0, 1, 2, 3, 4, 5, 6],
				days: [],
				year: '',
				month: '',
				toDay: moment().format('YYYY/MM/DD'),
				tempDate: []
			};
		},
		created() {
			// const moment1 = moment().format('YYYY/MM/DD');
			// const moment2 = '2023/10/24';
			// moment1.isSame(moment2,'day') // true
			// moment1.isSame(moment2,'date') // true
			// console.log(moment(moment1).diff(moment(moment2), 'days')) // == 0 > 1 < -1
			this.refresh()
		},
		methods: {
			group(array, subGroupLength,indexs) {
				let index = 0;
				let newArray = [];
				while(index < array.length) {
					let temp = array.slice(index, index += subGroupLength);
					const noticeData = temp.filter((item,key)=> indexs == key && item.show && !item.data && this.$moment(this.toDay).diff(this.$moment(item.date), 'days') < 1)
					newArray.push(noticeData);
				}
				return newArray.flat();
			},
			chooseWeek(index) {
				this.active = ''
				var groupedArray = this.group(this.days, 7, index);
				let temp = [];
				groupedArray.forEach((item,index) => {
					temp.push(item.date)
				}) 
				let tempDate = this.tempDate;
				const commonItems = temp.filter(item => tempDate.includes(item));
				const result = temp.filter(item => !tempDate.includes(item)).concat(tempDate.filter(item => !temp.includes(item)));
				this.tempDate = result
				this.$emit('chooseWeek',result)
			},
			refresh() {
				this.$nextTick(() => {
					const temp = calendar.getDays(this.year, this.month, this.data, this.isLess)
					// console.log(temp)
					const {days, year, month} = temp
					this.days = days
					this.year = year
					this.month = month + 1
				})
			},
			onChange(type) {
				this.tempDate = []
				this.month = type === 'prev' ? (this.month - 1) : (this.month + 1)
				this.refresh()
				this.$nextTick(() => {
					this.$emit('change', {
						year: this.year,
						month: this.month
					})
				})
			},
			onChoose(item) {
				if (!item.show || moment(this.toDay).diff(moment(item.date), 'days') > 0) return;
				this.tempDate = []
				this.active = item.date
				this.$nextTick(() => {
					this.$emit('choose', item)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.arrow {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		padding: 8rpx;
		width: 44rpx;
		height: 44rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}

	.arrow.left {
		transform: rotate(180deg);
	}

	.wn-calendar {
		min-width: 600rpx;
		background: white;
	}

	.head {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 18rpx 0px;
	}

	.head .t {
		padding: 0 84rpx;
		font-size: 28rpx;
		line-height: 64rpx;
		color: #3a3a3a;
	}

	.labels {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 72rpx;
		align-items: center;
		background: #f7f7f7;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}

	.label-item {
		min-width: 85rpx;
		flex: 1;
		height: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		align-items: center;
		justify-content: center;
		/* #endif */
	}

	.label-item .t {
		font-size: 28rpx;
		text-align: center;
		line-height: 28rpx;
		color: #3a3a3a;
	}

	.row {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		/* border-bottom: 1px solid transparent; */
	}
	
	.row.border {
		/* border-bottom: 1px solid #f0f0f0; */
	}

	.day-item {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* #endif */
		flex: 1;
		justify-content: center;
		height: 85rpx;
		min-width: 85rpx;
		position: relative;
	}

	.day-item.show {}
	.day-item .t {
		font-size: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #909399 !important;
	}

	.day-item.show .t {
		color: #3a3a3a !important;
	}
	.day-item.show .ban {
		color: #e43d33 !important;
	}
	.day-item.active {
		/* background: #ededed !important; */
		.t {
			background: #4CBD66;
			color: #fff !important;
			border-radius: 50%;
			font-size: 20rpx;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
		}
		.data {
			background: #4CBD66;
		}
	}
	.day-item .data {
		font-size: 20rpx;
		text-align: center;
		background: #909399;
		position: absolute;
		top: 0;
		right: 0;
		color: #fff;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
	}
	.day-item.show .data {
		background: #e43d33;
		color: #fff;
		&.data-1 {
			background-color: #4cbd66;
		}
		&.data-2 {
			background-color: #eaba32;
		}
		&.data-3 {
			background-color: #ff632a;
		}
	}
	.day-item.choose .t,.day-item.active .t {
		background: #4CBD66;
		color: #fff !important;
		border-radius: 50%;
		font-size: 20rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
</style>